<template>
  <div class="information-main base-main bgcFFF">
    <div class="nav">
      <van-tabs v-model="active" animated @click="changeNav">
        <van-tab v-for="(item, index) in navList" :key="index" :title="item.txt">
          <div class="activitie-list" v-if="imgsArr.length > 0 && active===0">
            <vue-waterfall-easy
              :imgsArr="imgsArr"
              :mobileGap=14
              @click="clickFn"
              @scrollReachBottom="getData">
              <div class="img-info pr" slot-scope="props">
                <p class="title clamp2 fs15 color45454D">{{props.value.info}}</p>
              </div>
            </vue-waterfall-easy>
          </div>

          <ul class="column" v-if="columnList.length > 0 && item.id !== 1">
            <li
              @click="toColumnList(column.id)"
              class="inline-block"
              v-for="(column, id) in columnList"
              :style="{marginLeft: (id+1)%2 == 0 ? '2%' : ''}"
              :key="id">
              <div class="column-box pr">
                <img :src="column.pic" alt="">
                <div class="column-name pa" :style="{backgroundImage: 'url('+column.pic+')'}">
                  <p class="fs16 colorFFF"># {{column.name}}</p>
                  <p class="fs14 clamp1">{{column.txt}}</p>
                </div>
              </div>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import vueWaterfallEasy from 'vue-waterfall-easy'

  export default {
    components: {
      vueWaterfallEasy
    },
    data() {
      return {
        active: 0,
        navList: [
          {
            id:1,
            txt: '精品推荐'
          },
          {
            id:2,
            txt: '资讯'
          },
          {
            id: 3,
            txt: '大健康行业'
          }
        ], // 导航
        columnList: [
          {
            id: 1,
            pic: 'https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg',
            name: '美食',
            txt: '分享各种游戏相关资讯'
          },
          {
            id: 2,
            pic: 'https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg',
            name: '美食',
            txt: '分享各种游戏相关资讯'
          },
          {
            id: 3,
            pic: 'https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg',
            name: '美食',
            txt: '分享各种游戏相关资讯'
          },
          {
            id: 4,
            pic: 'https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg',
            name: '美食',
            txt: '分享各种游戏相关资讯'
          },
          {
            id: 5,
            pic: 'https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg',
            name: '美食',
            txt: '分享各种游戏相关资讯'
          },
        ], // 栏目
        $imgW: 0,
        imgsArr: [
          {
            id: 1,
            href: '',
            info: "广州站联手索弗引入这款智能设备广州站联手索弗引入这款智能设备",
            src: "https://img.houzi8.com/qiantu-cover/0e9a2f66ea00d5eac76dd7d0b2a55890.jpg"
          },
          {
            id: 2,
            href: '',
            info: "广州站联手索弗引入这款智能设备",
            src: "https://lfyfly.github.io/vue-waterfall-easy/demo/static/img/1.jpg"
          },
          {
            id: 3,
            href: '',
            info: "广州站联手索弗引入这款智能设备",
            src: "https://lfyfly.github.io/vue-waterfall-easy/demo/static/img/3.jpg"
          },
          {
            id: 4,
            href: '',
            info: "广州站联手索弗引入这款智能设备",
            src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=644653837,1177619925&fm=26&gp=0.jpg"
          },
          {
            id: 5,
            href: '',
            info: "广州站联手索弗引入这款智能设备",
            src: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=928483064,2110408186&fm=26&gp=0.jpg"
          },
          {
            id: 6,
            href: '',
            info: "广州站联手索弗引入这款智能设备",
            src: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1206089742,3428063402&fm=26&gp=0.jpg"
          }
        ],//文章数据
        page: 1,
      }
    },
    created() {
      const _this = this
      console.log(this.active);
      this.getData()
      _this.$nextTick(() => {
//        _this.$imgW = $('img').width()
//        $('img').height(_this.$imgW)

      })
    },

    methods: {

      getData() {
        this.imgsArr = this.imgsArr.concat(this.imgsArr)
      },
      // 点击资讯文章
      clickFn(event, { index, value }) {
        // 阻止a标签跳转
        event.preventDefault()
        if (event.target.tagName.toLowerCase() == 'img') {
          console.log(index, value)
          this.$router.push({
            name: 'recommendDetail',
            query: {id:value.id}
          })
        }
      },
      toColumnList(id) {
        console.log(id);
        this.$router.push({
          name: 'columnList',
          query: {id: id}
        })
      },
      // 切换栏目
      changeNav(index) {
        console.log(index);
//        $('img').height($('img').width())
      },
    },
  }
</script>

<style lang="scss">
  @import "../../assets/css/information.scss";
</style>
